<template>
  <div class="hotsAdd">
    <el-page-header title="新闻管理" content="热门新闻" />

    <el-form
    ref="hotsFormRef"
    style="max-width: 600px"
    :model="hotsForm"
    status-icon
    :rules="hotsFormRules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="标题" prop="title">
      <el-input v-model="hotsForm.title" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <Editor @even="handleChangeContent"/>
    </el-form-item>
    <el-form-item label="类别" prop="category">
      <el-select v-model="hotsForm.category" placeholder="请选择类别">
        <el-option
          v-for="item in options"
          :key="item"
          :label="item.lable"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="封面" prop="cover">
      <Upload :avatar="hotsForm.cover"  @zxychange="handleAvatar"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitAddHot"> 添加新闻 </el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
import { ref, reactive } from "vue";
import Editor from "@/components/editor/Editor.vue";
import Upload from "@/components/upload/Upload.vue";
import upload from "@/util/upload";
import { ElMessage } from "element-plus";

const  hotsFormRef = ref()

const hotsForm = reactive({
  title: "",
  content: "", 
  category: 1,//1最新动态  2典型案例  3通知公告
  cover: "",
  file:null,
  isPublish:0
});
// 类别
const options = [
  { lable: "最新动态", value: 1 },
  { lable: "典型案例", value: 2 },
  { lable: "通知公告", value: 3 },
];
// 热门新闻表单规则
const hotsFormRules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  category: [{ required: true, message: "请选择类别", trigger: "blur" }],
  cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
});

// editor内容改变时触发
const handleChangeContent = (data)=>{
  hotsForm.content = data
}
// 封面图片改变时触发
const handleAvatar = (file)=>{
   // console.log(file);  file.raw代表图片的原生对象
   hotsForm.cover = URL.createObjectURL(file);
   hotsForm.file = file; //把头像的原生对象添加到提交表单数据中
}

// 添加新闻
const submitAddHot = ()=>{
  hotsFormRef.value.validate(async (valid) => {
    if (valid) {
        // 提交数据给后端
         let res = await upload('/adminapi/hots/addHot',hotsForm)
        // console.log(res);
        
        if(res.data.ActionType === 'OK'){
          ElMessage.success("添加新闻成功!")
        }
        // 添加成功,跳转到用户列表页
        router.push("/hots-manage/hotsList")
    }
  });
}

</script>

<style scoped lang="scss">
.hotsAdd {
  width: 100%;
  height: 100vh;
  .el-form{
    max-width: 1200px !important;
    margin-top: 30px !important;
  }
}

::v-deep .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep .avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar {
  width: 178px;
  height: 178px;
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
